<template>
<div>

<van-nav-bar
  title="修改用户信息"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>


<van-form @submit="onSubmit">
  <van-field
    v-model="username"
    name="用户名"
    label="用户名"
    placeholder="用户名"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
    <van-field
    v-model="tel"
    name="手机号"
    label="手机号"
    placeholder="手机号"
    :rules="[{ required: true, message: '请填写手机号' }]"
  />
    <van-field
        v-model="password"
        required
        type="password"
        label="密码"
        placeholder="请输入密码"
    />
    <van-field
        v-model="password1"
        required
        type="password"
        label="确认密码"
        placeholder="请再次输入密码"
    />

    <!-- <van-field
        readonly
        clickable
        name="calendar"
        :value="creat_time"
        label="创建时间"
        placeholder="点击选择日期"
        @click="showCalendar = true"
        />
        <van-calendar v-model="showCalendar" @confirm="onConfirm" /> -->

    <van-field
        readonly
        clickable
        name="calendar"
        :value="update_time"
        label="修改时间"
        placeholder="点击选择日期"
        @click="showCalendar = true"
        />
        <van-calendar v-model="showCalendar" @confirm="onConfirm" />


    <!-- <van-field
        readonly
        clickable
        name="picker"
        :value="xiaoqu"
        label="小区"
        placeholder="点击选择小区"
        @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom">
        <van-picker
            show-toolbar
            :columns="xiaoquList"
            @confirm="onConfirm1"
            @cancel="showPicker = false"
        />

        </van-popup>
    <van-field
        readonly
        clickable
        name="picker"
        :value="loudong"
        label="楼栋"
        placeholder="点击选择楼栋"
        @click="showPicker1 = true"
        />
        <van-popup v-model="showPicker1" position="bottom">
        <van-picker
            show-toolbar
            :columns="loudongList"
            @confirm="onConfirm2"
            @cancel="showPicker1 = false"
        />
        </van-popup>
    <van-field
        readonly
        clickable
        name="picker"
        :value="danyuan"
        label="单元"
        placeholder="点击选择单元"
        @click="showPicker2 = true"
        />
        <van-popup v-model="showPicker2" position="bottom">
        <van-picker
            show-toolbar
            :columns="danyuanList"
            @confirm="onConfirm3"
            @cancel="showPicker2 = false"
        />
        </van-popup>
    <van-field
        readonly
        clickable
        name="picker"
        :value="fangjian"
        label="房间"
        placeholder="点击选择房间"
        @click="showPicker3 = true"
        />
        <van-popup v-model="showPicker3" position="bottom">
        <van-picker
            show-toolbar
            :columns="fangjianList"
            @confirm="onConfirm4"
            @cancel="showPicker3 = false"
        />
        </van-popup> -->

  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">提交</van-button>
  </div>
</van-form>

</div>
</template>
<script>
 import { Toast } from 'vant';
export default {
   
  data() {
    return {
      username: '',
      tel: '',
      password: '',
    //   creat_time: '',
      update_time: '',
    //   xiaoqu: '',
    //   loudong: '',
    //   danyuan: '',
    //   fangjian: '',
    //   xiaoquList: ['南窑国际东区', '南窑国际西区'],
    //   loudongList: ['1栋', '2栋','3栋','4栋','5栋','6栋','7栋','8栋','9栋','10栋'],
    //   danyuanList: ['1单元', '2单元','3单元'],
    //   fangjianList: ['0101', '0202','0201','0202','0301','0302','0401','0402','0501','0502','0601','0602'],
     // show: false,
      showCalendar: false,
      showPicker: false,
      showPicker1: false,
      showPicker2: false,
      showPicker3: false,
    };
  },
  methods: {
   findOneUser(){
       this.$axios.post("user/findOneUser").then(res=>{
                    this.username=res.data.data.username;
                    this.tel=res.data.data.tel;
                    this.update_time=res.data.data.update_time;
            })	
   },
    onSubmit() {
		// 如果不符合注册条件则不会继续执行
		if(this.username.trim() == ''){
			Toast('注册失败！信息未完善');
        }else if(this.password!=this.password1){
             Toast('密码输入两次不一致！');
        }else{
            this.$axios.post("user/update").then(res=>{
                    if(res.data.code==1){
                        Toast.success('修改成功');
                        this.$router.push('/login');
                    }else if(res.data.code==2){
                        Toast.success('修改成功');
                        this.$router.push('/mine');
                    }else{
                        Toast.fail('修改失败');
                    }
            })	
        }	
		// if(!this.username.match(/^[1][3,5,6,7,8,9][0-9]{9}$/)){
		// 	return
		// }
		// if(!this.password.match(/^\w{6,}$/)){
		// 	return
		// }
		// // 1.获取localstorage的数据
		// let users = localStorage.users
		// if(users){
		// 	users = JSON.parse(users)
		// }else{
		// 	users = []
		// }
				
		// // 2.把新注册的用户信息添加到数组
		// users.push({
		// 	username:this.username,
		// 	password:this.password
		// })
				
		// // 3.保存到本地
		// localStorage.users = JSON.stringify(users)
				
		// Toast.success('注册成功');
				
		// setTimeout(()=>{ //一秒后跳转登录页面
		// 	this.$router.push({
		// 		path:'/login'
		// 	})
		// },1000)
    },
     onClickLeft() {
        this.$router.push('/user');
    },  
    // onConfirm(date) {
    //   this.creat_time = `${date.getMonth() + 1}/${date.getDate()}`;
    //   this.showCalendar = false;
    // },
     onConfirm(date) {
      this.update_time = `${date.getMonth() + 1}/${date.getDate()}`;
      this.showCalendar = false;
    },
    // onConfirm1(xiaoqu) {
    //   this.xiaoqu = xiaoqu;
    //   this.showPicker = false;
    // },
    //  onConfirm2(loudong) {
    //   this.loudong = loudong;
    //   this.showPicker1 = false;
    // },
    // onConfirm3(danyuan) {
    //   this.danyuan = danyuan;
    //   this.showPicker2 = false;
    // },
    //  onConfirm4(fangjian) {
    //   this.fangjian = fangjian;
    //   this.showPicker3 = false;
    // },
    
  }
}
</script>
<style >

</style>